﻿<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>奇妙园画图游戏三岁</title>
	<script src="../../js/jquery-2.2.4.min.js"></script>
	<script src="../../js/HGame.js"></script>
	<script src="../../js/getrequest.js"></script>
	<link rel="stylesheet" href="../../css/currency.css">
	<style>
		.section{
			width: 1080px;
			height: 1920px;
			overflow: hidden;
			position: relative;
			background: url("../../img/draw3/draw3.jpg") no-repeat;
		}
		.section:before{
			content: "";
			width: 160%;
			height: 90%;
			background:
					linear-gradient(36deg, #FFF8A2 42.34%, transparent 42.34%) 0 0,
					linear-gradient(72deg, #FFFFFF 75.48%, transparent 75.48%) 0 0,
					linear-gradient(-36deg, #FFF8A2 42.34%, transparent 42.34%) 100% 0,
					linear-gradient(-72deg, #FFFFFF 75.48%, transparent 75.48%) 100% 0,
					linear-gradient(36deg, transparent 57.66%, #FFFFFF 57.66%) 100% 100%,
					linear-gradient(72deg, transparent 24.52%, #FFFA99 24.52%) 100% 100%,
					linear-gradient(-36deg, transparent 57.66%, #FFFFFF 57.66%) 0 100%,
					linear-gradient(-72deg, transparent 24.52%, #FFFA99 24.52%) 0 100%,
					#FFF8A2 linear-gradient(#FFFF8E, #FFFFFF) 50% 100%;
			background-repeat: no-repeat;
			background-size: 50% 50%;
			opacity: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
			clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
			transform: translateX(-50%) translateY(-50%) scale(0) rotate(360deg);
			transition: all 0.3s ease 0s;
		}
		.src_before:before{
			opacity: 0.5;
			transform: translateX(-50%) translateY(-50%) scale(1.5) rotate(-360deg);
		}
		.section:after{
			content: "";
			width: 160%;
			height: 90%;
			background: radial-gradient(rgba(255,255,255,0.9),transparent,transparent);
			position: absolute;
			top: 0;
			left: -35%;
			opacity: 0;
			pointer-events: none;
		}
		.sec_after:after{ opacity: 1; }
		#boxRender{
			position: absolute;
			width: 874px;
			height: 734px;
			left: 94px;
			top: 421px;
		}
		.colorSelect .item{
			width:77px;
			height:74px;
			border-radius:0px 14px 14px 0px;
			position: absolute;
		}
		.imgShowRow .item{
			width: 320px;
			height: 231px;
			position: absolute;
		}
		#nowSelectColor{
			width: 135px;
			height: 55px;
			position: absolute;
			left: 895px;
			top: 1625px;
			background-color: #93E193;
		}
		.brush{
			width:145px;
			height:208px;
			position: absolute;
			left: 890px;
			top: 1490px;
			background: url("../../img/draw3/brush.png") no-repeat;
		}
		.complete{
			width:285px;
			height:110px;
			position: absolute;
			left: 749px;
			top: 1773px;
			outline: none;
			border: none;
			background: transparent;
		}
		#boxRender canvas{
			border-radius:15px;
		}
		.countdown{
			width: 285px;
			height: 36px;
			font-size: 36px;
			text-align: center;
			font-family: DFHaiBaoGB-W12;
			font-weight: normal;
			color: rgba(255,255,255,1);
			line-height: 36px;
			letter-spacing: 2px;
			position: absolute;
			left: 140px;
			top: 1810px;
		}
	</style>
</head>
<body>
<div class="commit_head">
	<img src="../../img/icon.gif" alt="" class="commit_icon"/>
	<span class="commit_build">熊孩子点吧</span>
	<img src="../../img/close.png" alt="" class="commit_close"/>
</div>
<div class="section">
	<div id="boxRender">

	</div>
	<div class="imgShowRow">
		<div onclick="changeDraw(0);img1();" style=" background-image: url('../../img/draw3/1.png');left: 45px;top: 1249px;" class="item img1"></div>
		<div onclick="changeDraw(1);img2();" style=" background-image: url('../../img/draw3/22.png');left: 381px;top: 1249px" class="item img2"></div>
		<div onclick="changeDraw(2);img3();" style=" background-image: url('../../img/draw3/33.png');left: 729px;top: 1249px;" class="item img3"></div>
	</div>
	<div id="nowSelectColor">

	</div>
	<div class="brush"></div>
	<div id="colorSelect" class="colorSelect">
		<div class="item" data-r="147" data-g="225" data-b="147" style="background:rgb(147,225,147);left: 97px;top: 1607px;"></div>
		<div class="item" data-r="255" data-g="227" data-b="94" style="background:rgb(255,227,94);;left: 212px;top: 1607px;"></div>
		<div class="item" data-r="100" data-g="162" data-b="245" style="background:rgb(100,162,245);left: 327px;top: 1607px;"></div>
		<div class="item" data-r="253" data-g="116" data-b="116" style="background:rgb(253,116,116);left: 442px;top: 1607px;"></div>
		<div class="item" data-r="169" data-g="109" data-b="61" style="background:rgb(169,109,61);left: 557px;top: 1607px;"></div>
		<div class="item" data-r="109" data-g="66" data-b="26" style="background:rgb(109,66,26);left: 671px;top: 1607px;"></div>
		<div class="item" data-r="255" data-g="255" data-b="255" style="background:rgb(255,255,255);left: 785px;top: 1607px;"></div>
	</div>
	<button class="complete"></button>
	<div class="countdown">倒计时：<span class="time">120</span>秒</div>
</div>
<audio src="../../audio/success.wav" id="success" type="audio/mpeg"></audio>
<script src="../../js/draw3/data.js" ></script>
<script type="text/javascript">
$(function () {
    /*设置显示的时间*/
    var count = 120;
    $('.time').html(count);
    /*设置定时器，1s一次*/
    var setV = setInterval(function () {
        count--;
        $('.time').html(count);
        /*判断当count的值小于0的时候游戏时间到，并关闭定时器*/
        if (count <= 0) {
            var mark = Math.ceil(zongshu/cishu);
            $("#success").get(0).play();
            setTimeout(function () {
                $(".section").addClass("src_before");
                $(".section").addClass("sec_after");
            }, 500);
            setTimeout(function () {
                window.location.href = "./result.html?id=" + id+"&mark="+mark;
            }, 1000);
            /*关闭定时器*/
            clearInterval(setV);
        }
    },1000);
});
var a=GetRequest();
var id=a['id'];
if(id == "draw3"||id == "draw6"){
    $(".commit_build").html("画一画");
}else if(id == "line3"||id == "line6"){
    $(".commit_build").html("连一连");
}else if(id == "word3"||id == "word6"){
    $(".commit_build").html("找一找");
}
var zongshu = 0;
var cishu = 1;
//点击确认
$(".complete").click(function(){
    var mark = Math.ceil(zongshu/cishu);
    $("#success").get(0).play();
    setTimeout(function () {
        $(".section").addClass("src_before");
        $(".section").addClass("sec_after");
    }, 500);
	setTimeout(function () {
		window.location.href = "../../result.html?id=" + id+"&mark="+mark;
	}, 1000);
});
var canvas = new HGAME.canvas();
var testBox=document.getElementById('boxRender');
testBox.appendChild(canvas.dom);
var animate=new HGAME.animate({
	action:function(){
		canvas.render();
	}
});
var colorObj={
	r:147,
	g:225,
	b:147
};
function initColor(){
    var item = $('.colorSelect .item');
    for(var i=0;i<item.length;i++){
        item[i].onclick=function(){
            for(var a=0;a<item.length;a++){
                item[a].innerHTML="";
            }
            document.getElementById("nowSelectColor").style.backgroundColor="rgba("+this.getAttribute("data-r")+","+this.getAttribute("data-g")+","+this.getAttribute("data-b")+","+"1)";
            colorObj.r=this.getAttribute("data-r");
            colorObj.g=this.getAttribute("data-g");
            colorObj.b=this.getAttribute("data-b");
        }
    };
}
initColor();
/*创建img数据*/
function changeImgColor(img,r,g,b){
	var c=document.createElement("canvas");
	var txt= c.getContext("2d");
	c.width=img.width;
	c.height=img.height;
	txt.drawImage(img,0,0);
	var data=txt.getImageData(0,0, c.width, c.height);
	for(var q=0;q<data.data.length;q+=4){
		if(data.data[q+3]>100){
			data.data[q]=r;
			data.data[q+1]=g;
			data.data[q+2]=b;
		}
	}
	txt.putImageData(data,0,0);
	return c;
}
var div=document.createElement("div");
function changeDraw(num){
	/*加载数据*/
	var source=new HGAME.source({
		loadCall:function(num,allNum){
			div.innerHTML="加载资源"+num+"/"+allNum;
			div.setAttribute("class","tool");
			testBox.appendChild(div);
		},
		loaded:function(){
			testBox.removeChild(div);
			var img=new HGAME.Object2D({
				img:this.data[0],
				w:874,
				h:734,
				x:0,
				y:0
			});
			canvas.child=new Array();
			canvas.add(img);
			var THIS = this;
			img.child=new Array();
			each(this.data,function(intX){
				if(intX>=1){
					img.add(new HGAME.Object2D({
						x:whxyInfo[num][intX-1].x,
						y:whxyInfo[num][intX-1].y,
						w:whxyInfo[num][intX-1].w,
						h:whxyInfo[num][intX-1].h,
						img:THIS.data[intX],
						isClick:true,
						clickFun:function(){
							if(typeof this.bufferImg=="undefined"){
								this.bufferImg=this.img;
								this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
                                console.log(111);
                                zongshu++;
							}else{
								this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
							}
						}
					}));
				}
			});
			animate.stop();
			animate.run();
		},
		data:data[num]
	});

}
changeDraw(0);
//切换示意图
function img1() {
    cishu++;
	$(".img1").css("background-image","url('../../img/draw3/1.png')");
    $(".img2").css("background-image","url('../../img/draw3/22.png')");
    $(".img3").css("background-image","url('../../img/draw3/33.png')");
}
function img2() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw3/11.png')");
    $(".img2").css("background-image","url('../../img/draw3/2.png')");
    $(".img3").css("background-image","url('../../img/draw3/33.png')");
}
function img3() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw3/11.png')");
    $(".img2").css("background-image","url('../../img/draw3/22.png')");
    $(".img3").css("background-image","url('../../img/draw3/3.png')");
}
//点击关闭
$(".commit_close").click(function(){
    //调用安卓方法
    JsBinder.onFinishActivity();
})
JsBinder.setActivityClose(false); //隐藏浏览器右上角关闭图表
</script>
</body>

</html>